<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
	<div class="leftHeader">
		<h:graphicImage value="/images/logo.png" />
	</div>
	<div class="rightHeader">
		<div class="contactDetails">Free Home Delivery above Rs 500 in
			South East Hyderabad Phone 040-00-00-0000 (9AM - 9PM) email
			cs@gogrocery.com</div>
		<div class="topRightMenu">
			<h:form>


			</h:form>
			<h:form id="topRightMenu">
				<h:outputText style="margin-right:30px;"
					value="Hello ! #{login.loginSuccess ? registration.name  : 'Guest' }" />
				<h:outputLink id="home"
					value="#{request.contextPath}/pages/ui/home.jsf" title="Home">
					Home |
				</h:outputLink>
				<h:outputLink id="loginLink1" value="javascript:void(0)"
					rendered="#{!(login.loginSuccess)}" onclick="dlg.show()"
					title="login">
					Log In |
				</h:outputLink>
				<h:outputLink
					value="#{request.contextPath}/pages/merchant/addProduct.jsf"
					rendered="#{login.loginSuccess}" title="My Account">
					My Account |
				</h:outputLink>
				<h:outputLink
					value="#{request.contextPath}/pages/user/myAccount.jsf"
					rendered="#{login.loginSuccess}" title="My Account">
					Menu 2 |
				</h:outputLink>
				<h:outputLink value="javascript:void(0)" title="Home">
					Menu 3 |
				</h:outputLink>
			</h:form>




			<h:form id="registration" prependId="false">
				<p:growl id="growl" showDetail="true" life="3000" />
				<p:dialog id="register" header="Regsiter" widgetVar="reg"
					resizable="false" width="515" height="201">
					<div class="sign-in-top">
						<h:outputLabel value="Sign Up" />
						<div columns="2" class="sign-in">
							<h:outputLabel value="Already registered ?" />
							<h:outputLink value="javascript:void(0)"
								onclick="reg.hide(); dlg.show();">
							Sign In
					</h:outputLink>
						</div>
					</div>
					<p:messages autoUpdate="true" />
					<table>
						<tr>
							<td><h:outputText value="Mobile:" />
							</td>
							<td colspan="5"><p:inputText id="mobile"
									style="width:145px;" value="#{registration.mobileNo}"
									maxlength="10" required="true" label="mobile" /> <p:watermark
									for="mobile" value=" 10 digit mobile number" /> <p:inputText
									id="name" style="width:145px;margin-left:5px;"
									value="#{registration.name}" maxlength="20" required="true"
									label="firstName" /> <p:watermark for="name" value="Name" />
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Password:" />
							</td>
							<td colspan="5"><p:password id="pwd"
									value="#{registration.password}" maxlength="20" required="true"
									style="width:145px;" feedback="true" label="password" /> <p:watermark
									for="pwd" value=" Password" /> <p:password id="confPwd"
									style="width:145px;margin-left:5px;"
									value="#{registration.confirmPassword}" maxlength="20"
									required="true" label="Confirm Password" /> <p:watermark
									for="confPwd" value=" Confirm Password" />
							</td>
						</tr>
						<tr>
							<td><h:outputText value="Email:" />
							</td>
							<td><p:inputText id="email" value="#{registration.email}"
									maxlength="50" style="width:300px;" required="true"
									label="Email" />
							</td>
							<td><p:watermark for="email" value="joe@gmail.com" />
							</td>
						</tr>

						<tr>
							<td><h:outputText value="Address:" />
							</td>
							<td colspan="5"><p:inputText id="houseNo"
									style="width:145px;" value="#{registration.houseNo}"
									required="true" label="HouseNo" /> <p:watermark for="houseNo"
									value=" House No" /> <p:inputText id="street"
									value="#{registration.street}" required="true"
									style="width:145px;margin-left:5px;" label="Street" /> <p:watermark
									for="street" value=" Street " />
							</td>
						</tr>

						<tr>
							<td></td>
							<td colspan="5"><p:inputText id="area" style="width:145px;"
									value="#{registration.area}" required="true" label="Area" /> <p:watermark
									for="area" value=" Area " /> <p:inputText id="landMark"
									style="width:145px;margin-left:5px;"
									value="#{registration.landmark}" required="true"
									label="LandMark" /> <p:watermark for="landMark"
									value=" Land Mark " />
							</td>

						</tr>
						<f:facet name="footer">
							<p:commandButton id="registerButton" value="Register"
								update="growl :topRightMenu" style="float:right;"
								actionListener="#{registration.register}"
								oncomplete="handleRegistrationRequest(xhr, status, args)" />
						</f:facet>
					</table>
				</p:dialog>
			</h:form>
			<h:form id="login">
				<p:growl id="growl" showDetail="true" life="3000" />
				<p:dialog id="dialog" header="Login" widgetVar="dlg"
					resizable="false" width="339" height="201">
					<div class="sign-in-top">
						<h:outputLabel value="Sign In" />
						<div columns="2" class="sign-in">
							<h:outputLabel value="New User ?" />
							<h:outputLink value="javascript:void(0)"
								onclick="reg.show(); dlg.hide();">
							SignUp
					</h:outputLink>
						</div>
						<h:commandLink id="facebook" action="#{userSession.socialConnect}"
							immediate="true">
							<f:setPropertyActionListener target="#{userSession.providerID}"
								value="facebook" />
							<h:graphicImage value="/images/facebook_icon.jpg" />
						</h:commandLink>
					</div>
					<p:messages autoUpdate="true" />
					<h:panelGrid columns="2" cellpadding="5">
						<h:outputLabel for="username" value="Mobile No:" />
						<p:inputText value="#{login.mobileNo}" id="username"
							required="true"
							requiredMessage="Please enter a valid Mobile number"
							label="username" />

						<h:outputLabel for="password" value="Password:" />
						<h:inputSecret value="#{login.pwd}" id="password" required="true"
							requiredMessage="Please enter Password" label="password" />
						<f:facet name="footer">
							<p:commandButton id="loginButton" value="Login"
								style="float:right;" update=":topRightMenu"
								actionListener="#{login.login}"
								oncomplete="handleLoginRequest(xhr, status, args)" />
						</f:facet>
					</h:panelGrid>

				</p:dialog>
				<script type="text/javascript">
					function handleLoginRequest(xhr, status, args) {
						if (args.validationFailed || !args.loginSuccess) {
							dlg.jq.effect("shake", {
								times : 5
							}, 100);
						} else {
							dlg.hide();
						}
					}
					function handleRegistrationRequest(xhr, status, args) {
						if (args.validationFailed || !args.loginSuccess) {
							dlg.jq.effect("shake", {
								times : 5
							}, 100);
						} else {
							reg.hide();
						}
					}
				</script>
			</h:form>
		</div>

	</div>

</ui:composition>